<template>
  <div class="review-container">
    <el-page-header @back="goBack" title="返回人才列表" style="margin-left:10px;height:20px"></el-page-header>
    <div class="box-header">

      <el-steps :active="active" :finish-status="status">
        <el-step title="一面通过"></el-step>
        <el-step title="二面通过"></el-step>
        <el-step title="终面"></el-step>
        <el-step title="未通过"></el-step>
      </el-steps>
    </div>

    <div  class="box-core">
      <div class="box-middle" style="margin-left:200px">
        <Editor v-model="content"/>
      </div>
      <div class="box-footer">
        <el-card class="box-card">
          <div  class="text item">
            <span>模板</span>
            <el-select v-model="value" placeholder="请选择模板" style="padding:0 30px 0 30px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-button type="primary" @click="optTemplate">确定选择模板</el-button>
          </div>
          <div  class="text item">
            <el-button type="primary" style="margin-left: 140px" @click="notice">面试通知</el-button>
            <el-button type="info" @click="reset">重置</el-button>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top:50px">
          <div  class="text item">
            <el-button type="primary" style="margin-left: 120px" @click="adopt(active+1,'通过')">通过面试</el-button>
            <el-button type="danger" @click="adopt(4,'不通过')">不通过</el-button>
          </div>
        </el-card>


      </div>

    </div>




  </div>
</template>

<script>
import {templateList} from "@/api/template";
import {emailNotice, passTheInterview, selectPersonInfoById} from "@/api/personnel";

export default {


  data(){
    return{
      id:'',
      active:0,
      status:'success',
      content:'',
      templateList:[],
      options: [],
      value: ''
    }
  },

  components: {
    Editor: resolve => resolve(require('@/components/editor/editor.vue'))
  },

  created() {
    this.id = this.$route.params.id
    this.template()
    this.getInfo()
  },

  watch:{
    active:{
      handler(index){
        if (index === 4){
          this.status = 'error'
        }else {
          this.status = 'success'
        }
      },
      deep:true
    },

  },
  methods:{
    reset(){
      this.$router.go(0)
    },
    goBack(){
      this.$router.go(-1)
    },
    next(){
      if (this.active++ > 3) this.active = 0;
    },
    async template(){
      const {data:res} = await templateList()
      this.templateList = res.data
      let options = []
      res.data.forEach(item => options.push({"value":item.id,"label":item.templateName}))
      this.options = options
    },
    optTemplate(){
      const p = this.templateList.filter(item => item.id === this.value)[0]
      this.content = p.info
    },
    async notice(){
      const res = await emailNotice(this.id,{"content":this.content})
      console.log(res)
      if(res.code === 200){
        this.$message({message: '邮件发送成功', type: 'success'});
      }else {
        this.$message.error(res.message);
      }
      this.content = ''
      this.options = []
      this.value = ''
      this.templateList = []
      await this.template()
    },
    async getInfo(){
      const {data:res} = await selectPersonInfoById(this.id)
      this.active = res.data.reviewStatus
    },

    async adopt(status,type){
      if(type === '通过'){
        if (status>3){
          return
        }
      }else {
        if (this.active === 4){
          return
        }
      }
      const res = await passTheInterview(this.id,{"content":this.content,"status":status})
      if(res.code === 200){
        this.$message({message: '审核成功', type: 'success'});
      }else {
        this.$message.error(res.message);
      }
      this.content = ''
      await this.getInfo()
    }


  },


}
</script>

<style scoped>
.review-container{
  position: relative;
  height:100%;
  width: 100%;
}
.box-header{
  margin:2% 10% 5% 10%
}
.box-middle{
  float:left;
  height:40%;
  width:50%;
  display:inline-block;
}
.box-core{
  width:100%;
  height:600px
}
.box-footer{
  float:left;
  display:inline-block;
  padding:2% 0 0 10%;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
</style>
